<template>
	<view>
		<Navbar :background="background" :isReturn="true"></Navbar>
		<view class="point_header">
			<view class="header_point">
				<view class="header_point_title u-m-t-35">
					{{ userData.holder.num }}
				</view>
				<text class="header_point_tag u-m-t-10">我的收入</text>
			</view>
		</view>
		<view class="u-m-30">
			<view class="u-m-t-30 u-radius-20 record_box">
				<view class="record_title" @click="goPaymentForm">
					<view>完善收款账户信息</view>
					<view class="u-m-r-10">{{ userData.user_init.accountLabel }}</view>
				</view>
			</view>
			<view class="record_content">
				<view class="u-p-r-20 u-flex-1 record_line u-text-center">
					<view class="u-font-24">可提现</view>
					<view class="record_price">{{ userData.holder.grant_num }}</view>
				</view>
				<view class="u-m-l-20 u-p-r-20 u-flex-1 record_line u-text-center">
					<view class="u-font-24">提现中</view>
					<view class="record_price">{{ userData.holder.grant_false_num }}</view>
				</view>
				<view class="u-m-l-20 u-p-r-20 u-flex-1 record_line u-text-center">
					<view class="u-font-24">冻结中</view>
					<view class="record_price">{{ userData.holder.freeze_num }}</view>
				</view>
				<view class="u-m-l-20 u-flex-1 u-text-center">
					<view class="u-font-24">已发放</view>
					<view class="record_price">{{ userData.holder.grant_true_num }}</view>
				</view>
			</view>
			<view class="u-m-t-20 u-m-l-10 u-font-34 u-font-bold" v-if="list[0]">收入明细</view>
			<view class="u-card-box u-m-t-30" v-for="item in list" :key="item.id">
				<view class="u-flex u-row-between u-col-top">
					<view class="u-flex-1">
						<span class="u-font-bold u-font-30 u-text-line-15">{{item.title}}</span>
					</view>
					<view class="u-font-30 u-font-bold u-color-red u-m-l-10">{{item.num / 100}}</view>
				</view>
				<view class="u-m-t-10 u-color-gray">{{item.remark}}</view>
				<view class="u-m-t-10 u-color-gray">{{item.create_time}}</view>
			</view>
			<Loadmore :status="status"></Loadmore>
		</view>

		<view style="height: 200rpx"></view>

		<Bottom :btnText="'提现'" @confirm="onCashout"></Bottom>
	</view>
</template>

<script>
	import {
		userInviteMoneyList,
		userInfo
	} from '@/network/api.js'
	import { teaPerformanceList } from '@/network/tea.js'
	import { pointTransform } from '@/utils/index.js'
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Loadmore from '@/components/Loadmore.vue'
	import reachBottom from '@/mixins/reachBottom.js'
	export default {
		mixins: [reachBottom],
		components: {
			Navbar,
			Bottom,
			Loadmore
		},
		data() {
			return {
				background: {
					background: "#B67642"
				},
				userData: {},
				list: [],
			}
		},
		onLoad() {
			this.onGetUserInfo()
			this.onGetRecordList()
		},
		mounted(){
			let _this = this
			uni.$on('update',function(){
				_this.onGetUserInfo()
			})
		},
		onUnload() {
			uni.$off('update')
		},
		methods: {
			async onGetUserInfo(){
				const res = await userInfo({user_id: uni.getStorageSync("user_id")})
				switch(res.data.user_init.is_have){
					case 0:
					    res.data.user_init.accountLabel = '去完善 >'
						break;
					case 1:
					    res.data.user_init.accountLabel = '已完善'
						break;
				}
				res.data.holder.num = pointTransform(res.data.holder.num)
				res.data.holder.grant_num = pointTransform(res.data.holder.grant_num)
				res.data.holder.freeze_num = pointTransform(res.data.holder.freeze_num)
				res.data.holder.grant_true_num = pointTransform(res.data.holder.grant_true_num)
				this.userData = res.data
			},
			async onGetRecordList() {
				const params = {
					user_id: uni.getStorageSync("user_id"),
					page: this.page,
					limit: 20
				}
				const res = await teaPerformanceList(params)
				this.count = res.data.count
				res.data.list.map(item => this.list.push(item))
				if (this.list.length == this.count) {
					this.status = 'nomore'
				}
			},
			goPaymentForm(){
				uni.navigateTo({
					url: "/operate/paymentForm/paymentForm"
				})
			},
			onCashout(){
				uni.navigateTo({
					url: "/operate/cashOut/cashOut"
				})
			},
			loadData() {
				if (this.status == 'nomore') {
					return
				} else {
					this.page++
					this.onGetRecordList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.point_header{
		width: 100%;
		height: 250rpx;
		background-image: url("https://weilaijiuju.oss-cn-shenzhen.aliyuncs.com/images/common/20250630462211601895.png");
		background-size: cover;
		background-position-y: -157%;
		
		.header_point {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		
			.header_point_title {
				font-size: 70rpx;
				font-weight: bold;
				color: #fff;
			}
		
			.header_point_tag {
				color: #E0E0E0;
			}
		}
	}
	
	.record_title {
		display: flex;
		justify-content: space-between;
		background: #B3723E;
		color: #fff;
		padding: 15rpx 20rpx 20rpx 20rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		font-size: 26rpx;
	}

	.record_content {
		padding: 20rpx 30rpx;
		display: flex;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border: 1rpx solid #fff;
		background: linear-gradient(to bottom, #FBECE2, #FFFEFD);

		.record_price {
			font-size: 40rpx;
			font-weight: bold;
			margin-top: 5rpx;
		}

		.record_line {
			border: 1rpx solid #EFE5DE;
			border-width: 0 4rpx 0 0;
		}
	}

	.fail_tag {
		font-size: 23rpx;
		background: #F84D3F;
		color: #FFF;
		padding: 5rpx 10rpx;
		border-radius: 8rpx;
	}

	.success_tag {
		font-size: 23rpx;
		background: #0CB43D;
		color: #FFF;
		padding: 5rpx 10rpx;
		border-radius: 8rpx;
	}
</style>